<template>
	<view class="subject">
		<view class="user">
		<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E8%AE%BE%E7%BD%AE.png" alt="" class="set"/>
		<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E4%BA%8C%E7%BB%B4%E7%A0%81.png" alt="" class="qrcode"/>
		<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%A4%B4%E5%83%8F.png" alt="" class="avatar"/>
		
			<view class="column">
				<text>0</text>
				<text>0</text>
				<text>0</text>
			</view>
			<view class="column-text">
				<text>积分></text>
				<text>优惠劵></text>
				<text>代金券></text>
			</view>
			<text class="usertext1">V0会员 收货地址 </text>
			<text class="usertext2">{{ nickName }}</text>
		</view>
		<view class="orders">
			<text class="order-text1" @click="goToAllOrders('all')">我的订单</text>
			<text class="order-text2" @click="goToAllOrders('all')">全部订单></text>
			<view class="orderphoto">
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%BE%85%E4%BB%98%E6%AC%BE.png" mode="" @click="goToAllOrders('unpaid')"></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%BE%85%E5%8F%91%E8%B4%A7.png" mode="" @click="goToAllOrders('unshipped')"></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%BE%85%E6%94%B6%E8%B4%A7.png" mode="" @click="goToAllOrders('unreceived')"></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%BE%85%E8%AF%84%E4%BB%B7.png" mode="" @click="goToAllOrders('tobeevaluated')"></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E9%80%80%E6%AC%BE%E5%94%AE%E5%90%8E.png"></image>
			</view>
			<view class="ordertext">
				<text @click="goToAllOrders('unpaid')">待付款</text>
				<text @click="goToAllOrders('unshipped')">待发货</text>
				<text @click="goToAllOrders('unreceived')">待收货</text>
				<text @click="goToAllOrders('tobeevaluated')">待评价</text>
				<text >退款/售后</text>
			</view>
		</view>
		<view class="rights">
			<view class="rightstext">
				<text>V0会员</text>
				<text>积分商城</text>
				<text>互动有礼</text>
				<text>红包卡券</text>
			</view>
			<view class="rightsphoto">
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/VIP%E4%BC%9A%E5%91%98.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E7%A7%AF%E5%88%86%E5%95%86%E5%9F%8E.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E4%BA%92%E5%8A%A8%E6%9C%89%E7%A4%BC.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E7%BA%A2%E5%8C%85%E5%8D%A1%E5%88%B8.png" mode=""></image>
			</view>
		</view>
		<view class="official">
			<view class="rightstext">
				<text>官方客服</text>
				<text>现金红包</text>
				<text>以旧换新</text>
				<text>我的评价</text>
			</view>
			<view class="rightsphoto">
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E5%AE%98%E6%96%B9%E5%AE%A2%E6%9C%8D.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E7%8E%B0%E9%87%91%E7%BA%A2%E5%8C%85.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E6%97%A7%E6%8D%A2%E6%96%B0.png" mode=""></image>
				<image src="https://gwk.oss-cn-beijing.aliyuncs.com/%E6%88%91%E7%9A%84%E8%AF%84%E4%BB%B7.png" mode=""></image>
			</view>
		</view>
 <view class="enjoy">
 			<text class="enjoy-title">精选商品</text>
 		      <view v-for="product in products" :key="product.id" class="enjoy-card" @click="navigateToDetail(product)">
 		        <image :src="product.url" class="enjoy-image" mode="aspectFill" @error="imageError($event, product)" @load="imageLoad"></image>
 		        <text class="enjoy-name">{{ product.商品名 }}</text>
 		        <text class="enjoy-price">¥{{ product.价格 }}</text>
 		      </view>
 		    </view>
 		  </view>
 		</template>
 
 <script>
 export default {
   data() {
     return {
       nickName: '', // 初始化昵称为空字符串
       products: [], // 存储商品数据
       categories: ['全部', '手机', '电脑', '食品', '男装', '生鲜', '家具厨具'],
       selectedCategory: '全部',
       defaultImage: '../../static/default.png', // 默认图片路径
       showBackToTop: false, // 控制回到顶部按钮的显示
     };
   },
   // 当组件实例被创建之后，会立即被调用
   created() {
     this.fetchProducts(); // 获取商品数据
     // 如果需要从本地存储获取昵称，取消注释下面代码
     this.initNickName();
   },
   mounted() {
     // 如果需要在组件挂载完成后获取昵称，可以在此执行
     this.initNickName();
   },
   methods: {
     initNickName() {
       // 从本地存储中获取昵称
       const nickName = wx.getStorageSync('nickName') || '未登录'; // 如果没有昵称，则显示'未登录'
       this.nickName = nickName;
     },
     goToAllOrders(status) {
       uni.navigateTo({
         url: `/pages/allorders/allorders?status=${status || 'all'}`
       });
     },
     fetchProducts() {
       uni.request({
         url: 'http://123.57.75.79:3000/employees', // 确保URL正确，替换为实际的API端点
         method: 'GET',
         success: (res) => {
           if (res.statusCode === 200) {
             this.products = res.data;
           } else {
             console.error('获取商品列表失败，状态码：', res.statusCode);
           }
         },
         fail: (error) => {
           console.error('请求失败：', error);
         }
       });
     },
     navigateToDetail(product) {
       uni.navigateTo({
         url: `/pages/productdetail/productdetail?id=${product.id}&name=${encodeURIComponent(product.商品名)}&price=${product.价格}&url=${encodeURIComponent(product.url)}`
       });
     },
     imageError(event, product) {
       event.target.src = this.defaultImage;
     },
     imageLoad() {
       // 图片加载成功的处理逻辑
     },
     // ... 这里可以添加其他方法
   }
 };
 </script>
 <style>
 .subject{
 	background-color: #f2f4f5; /* 背景颜色 */
 	position: relative;
 }
 
 .user{
 	background-color: #fe1b43; /* 红色区域的背景颜色 */
 	border-radius:0 0 25rpx 25rpx; /* 圆角 */
 	height: 330rpx;
 	position: relative;
 	z-index: 1;
 }
 .usertext1{
 	position: absolute;
 	 font-size: 20rpx;
 	 color: white;
 	 left: 150rpx;
 	 top: 130rpx;
 }
 .usertext2{
 	position: absolute;
 	 font-size: 40rpx;
 	 color: white;
 	 left: 170rpx;
 	 top: 70rpx;
 }
 .set {
 	position: absolute;
 	width: 40rpx;
 	height: 40rpx;
 	top: 20rpx;
 	right: 100rpx;
 	}
 .qrcode{
 	position: absolute;
 	width: 40rpx;
 	height: 40rpx;
 	top: 20rpx;
 	right: 20rpx;
 }
 .avatar{
 	position: absolute;
 	width:85rpx;
 	height:85rpx;
 	top: 70rpx;
 	left: 50rpx;
 }
 .column {
   display: flex;          /* 启用 Flexbox */
   justify-content: space-around; /* 横向平均分布文本 */
   position: absolute;     /* 绝对定位，以便放置在.user内 */
   width: 100%;            /* 占满可用宽度 */
   top: 170rpx;
 }
 
 /* 可以为每个text元素设置样式，例如字体大小和颜色 */
 .column text {
   font-size: 20rpx;       /* 设置字体大小 */
   color: white;           /* 设置字体颜色 */
   margin: 0 10rpx;        /* 设置文本之间的间距 */
 }
 .column-text{
 	display: flex;          /* 启用 Flexbox */
 	justify-content: space-around; /* 横向平均分布文本 */
 	position: absolute;     /* 绝对定位，以便放置在.user内 */
 	width: 100%;            /* 占满可用宽度 */
 	top: 210rpx;
 }
 .column-text text{
 	font-size: 20rpx;       /* 设置字体大小 */
 	color: white;           /* 设置字体颜色 */
 	margin: 0 15rpx;        /* 设置文本之间的间距 */
 }
 .orders {
   position: relative;
   border-radius: 30rpx;
   background-color: white;
   height: 180rpx;
   margin: 0 15rpx 0 15rpx;
   margin-top: -60rpx;
   position: relative;
   z-index: 2;
 }
 .ordertext{
 	display: flex;          /* 启用 Flexbox */
 	justify-content: space-evenly;
 	position: absolute;     /* 绝对定位，以便放置在.user内 */
 	width: 100%;            /* 占满可用宽度 */
 	color: black;
 	top: 130rpx;
 	font-size: 25rpx;
 	left: 30rpx;
 	margin-left: -28rpx;
 }
 .order-text1{
 	position: absolute;
 	font-size: 28rpx;
 	color: black;
 	font-weight:500;
 	left: 15rpx;
 	top: 12rpx;
 }
 .order-text2{
 	position: absolute;
 	font-size: 20rpx;
 	right: 15rpx;
 	top: 18rpx;
 }
 .orderphoto {
   display: flex;          /* 启用 Flexbox */
   justify-content: space-evenly; /* 使图片之间的间隔均匀分布 */
   position: relative;     /* 相对于.orders定位 */
   width: 100%;            /* 占满可用宽度 */
   top: 70rpx;            /* 根据实际情况调整垂直位置 */
   left: -10rpx;            /* 根据实际情况调整水平位置，使其与.ordertext对齐 */
 }
 .orderphoto image {
   width: 50rpx;           /* 图片宽度 */
   height: 50rpx;          /* 图片高度 */
   /* 其他样式如mode可以根据需要设置 */
 }
 .rights{
 	position: relative;
 	border-radius:30rpx; /* 圆角 */
 	background-color:white;
 	height: 150rpx;
 	margin:0 15rpx 0 15rpx;
 	margin-top: 30rpx;
 }
 .rightstext{
 	display: flex;          /* 启用 Flexbox */
 	justify-content: space-evenly;
 	position: absolute;     /* 绝对定位，以便放置在.user内 */
 	width: 100%;            /* 占满可用宽度 */
 	color: black;
 	top: 100rpx;
 	font-size: 25rpx;
 
 }
 .rightsphoto{
 	display: flex;          /* 启用 Flexbox */
 	justify-content: space-evenly; /* 使图片之间的间隔均匀分布 */
 	position: relative;     /* 相对于.orders定位 */
 	width: 100%;            /* 占满可用宽度 */
 	top: 35rpx;
 }
 .rightsphoto image{
 	width: 50rpx;           /* 图片宽度 */
 	height: 50rpx;          /* 图片高度 */
 	margin: 0rpx 25rpx;
 	transform: translateX(-4rpx); /* 负值向左移动 */
 }
 .official{
 	position: relative;
 	border-radius:30rpx; /* 圆角 */
 	background-color:white;
 	height: 150rpx;
 	margin:0 15rpx 0 15rpx;
 	margin-top: 30rpx;
 }
 .enjoy {
   display: flex;
   flex-wrap: wrap;
   justify-content: center; /* 水平居中 */
   padding: 20rpx; /* 左右留白 */
   margin: 0; /* 移除外边距 */
   margin-top: 80rpx; /* 根据需要调整上边距 */
   position: relative; /* 使标题绝对定位 */
 }
 
 .enjoy-title {
   position: absolute; /* 绝对定位 */
   top: -30rpx; /* 根据需要调整 */
   left: 20rpx; /* 根据需要调整 */
   font-size: 30rpx; /* 根据需要调整 */
   font-weight: bold; /* 字体加粗 */
   color: #333; /* 字体颜色 */
 }
 
 .enjoy-card {
   width: calc(49% - 20rpx); /* 留出左右间隔，根据实际情况调整 */
   height: 390rpx;
   margin: 10rpx; /* 卡片之间的间隔 */
   background-color: #fff;
   border-radius: 8rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
 }
 
 .enjoy-card:nth-child(2n+1) {
   margin-right: 2%; /* 每行第一个卡片到右边的距离 */
 }
 
 .enjoy-card:nth-child(2n) {
   margin-left: 2%; /* 每行第二个卡片到左边的距离 */
 }
 
 .enjoy-image {
   width: 100%;
   height: 250rpx; /* 根据需要调整高度 */
   object-fit: cover;
 }
 
 .enjoy-name {
   font-size: 28rpx;
   color: #333;
   padding: 10rpx;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
 .enjoy-price {
   font-size: 30rpx;
   color: #f14048;
   padding: 20rpx;
   text-align: center;
 }
 </style>